<template>
  <div class="hello">
    <!-- 底部导航栏 -->
    <div class="bott">
      <div class="tabl" v-for="(item,index) in arr" :key='index' :data-set='index' @click="linkto">
            <img :src="SMDataURL+ item.src" v-if="key==index"></img>
            <img :src="SMDataURL+ item.actsrc" v-else></img>
            <span>{{item.name}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mysy",
  data() {
    return {
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      arr:[
        {src:'/images/tghome.png',name:'首页',actsrc:'/images/tghome_1.png'},
        {src:'/images/dbdx.png',name:'本地生活',actsrc:'/images/dbdxbd_1.png'},
        {src:'/images/tgwode.png',name:'我的',actsrc:'/images/tgwode_1.png'},
      ],
      key:0,
    };
  },
  watch:{
    '$route'(to,from){
      console.log(to)
      console.log(from)
    }
  },
  methods: {
    linkto(e){
      var xiab=e.currentTarget.dataset.set
      this.key=xiab
      switch (xiab) {
        case '0':
          this.$router.push('/')
          break;
        case '1':
          this.$router.push('/bendishuo')
          break;
        case '2':
          this.$router.push('/mymine')
          break;
      }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 底部导航栏 */
.bott {
  width: 100%;
  height: 48px;
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tabl {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}
.tabl img {
  width: 27px;
  height: 27px;
}
</style>
